<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>day10</title>
</head>

<body>
    <div id="add">
        <ul>
            剩余支付时间: <li>{{day}}</li>天<li>{{hour}}</li>时<li>{{minute}}</li>分<li>{{second}}</li>秒
        </ul>
    </div>
</body>

</html>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: '#add',
        data() {
            return {
                day: '',
                hour: '',
                minute: '',
                second: ''
            };
        },
        methods: {
            add() {
                this.day = 11 - new Date().getDay()
                this.hour = 24 - new Date().getHours();
                this.minute = 60 - new Date().getMinutes();
                this.second = 60 - new Date().getSeconds();
            }
        },
        mounted() {
            this.add()
        },
    })
</script>
<style>
    #add {
        width: 500px;
        height: 50px;
    }

    ul {
        display: flex;
        font-size: 20px;
    }

    li {
        list-style: none;

    }
</style>